<template>
  <div class="w-bgc">
    <div class="flex j-s-b a-c mb16">
      <div>
        <el-button type="primary" plain :icon="Plus">新增安排</el-button>
        <el-button type="primary" plain :icon="Edit">修改安排</el-button>
        <el-button type="primary" plain :icon="Plus" @click="click"
          >时间段排班</el-button
        >
      </div>
      <div>
        <el-button :icon="Close">停用安排</el-button>
        <el-button plain type="danger" :icon="Delete">删除安排</el-button>
      </div>
    </div>
    <!-- 排班表 -->
    <el-table :data="tableData" size="small" style="width: 100%" border>
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.lable"
        :width="item.width"
        align="center"
      >
        <template v-if="item.children">
          <el-table-column
            v-for="(i, k) in item.children"
            :key="k"
            :prop="i.prop"
            :label="i.lable"
            :width="i.width"
            align="center"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <addScheduling v-model="visible" />
</template>
<script setup lang="ts">
import addScheduling from "./components/addScheduling.vue";
import { Delete, Edit, Plus, Close } from "@element-plus/icons-vue";
const child = ref();
const visible = ref(false);
function pageChange(data: any) {
  console.log("data", data);
}

function currentChange(val) {
  console.log("val", val);
}
const columns = reactive([
  {
    label: "测试label",
    prop: "test",
  },
  {
    label: "测试label",
    prop: "test",
    render: ({ row }) => {
      console.log("res", row);
      return h(
        "div",
        {
          style: {
            color: "red",
          },
        },
        "jsx渲染数据"
      );
    },
  },
]);
const tableDatas = reactive([
  {
    test: "数据",
  },
  {
    test: "数据",
  },
]);

const click = () => {
  visible.value = true;
};

const tableColumn = reactive([
  {
    lable: "号类",
    prop: "category",
    width: 50,
  },
  {
    lable: "号别",
    prop: "number",
    width: 50,
  },
  {
    lable: "科室",
    prop: "department",
    width: 70,
  },
  {
    lable: "项目",
    prop: "project",
    width: 90,
  },
  {
    lable: "医生",
    prop: "doc",
    width: 60,
  },
  {
    lable: "已挂数",
    prop: "hang",
    width: 60,
  },
  {
    lable: "已约数",
    prop: "reservation",
    width: 60,
  },
  {
    lable: "建档",
    prop: "record",
    width: 50,
  },
  {
    lable: "周日",
    children: [
      {
        lable: "安排",
        prop: "arrange",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment",
        width: 60,
      },
    ],
  },
  {
    lable: "周一",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "周二",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "周三",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "周四",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "周五",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "周六",
    align: "center",
    children: [
      {
        lable: "安排",
        prop: "arrange1",
        width: 60,
      },
      {
        lable: "限号",
        prop: "limit1",
        width: 60,
      },
      {
        lable: "限约",
        prop: "appointment1",
        width: 60,
      },
    ],
  },
  {
    lable: "分诊方式",
    prop: "ways",
  },
  {
    lable: "有效范围",
    prop: "range",
  },
  {
    lable: "序号控制",
    prop: "no",
  },
  {
    lable: "停用日期",
    prop: "stopTime",
  },
  {
    lable: "应诊诊室",
    prop: "way",
  },
  {
    lable: "排班类型",
    prop: "type",
  },
]);

interface User {
  id: string;
  category: string; //号类
  number: string; // 号别
  department: string; // 科室
  project: string; //项目
  doc: string; // 医生
  hang: number; // 已挂号数
  reservation: number; //已预约数
  record: string; // 建档
  arrange: string | number;
  limit: string | number;
  appointment: string | number;
}

const tableData = [
  {
    way: "不分诊",
    range: "",
    no: "",
    stopTime: "",
    ways: "",
    type: "日期",
    category: "普通",
    number: "101",
    department: "急诊",
    project: "普通门诊诊查费",
    doc: "李三",
    hang: "1",
    reservation: 1,
    record: "1", // 建档
    arrange: "上午",
    limit: 22,
    appointment: 23,
    arrange1: "上午",
    limit1: 22,
    appointment1: 23,
  },
  {
    way: "不分诊",
    range: "",
    no: "",
    stopTime: "",
    ways: "",
    type: "日期",
    category: "普通",
    number: "101",
    department: "急诊",
    project: "普通门诊诊查费",
    doc: "李三",
    hang: "1",
    reservation: 1,
    record: "1", // 建档
    arrange: "上午",
    limit: 22,
    appointment: 23,
    arrange1: "上午",
    limit1: 22,
    appointment1: 23,
  },
];
</script>

<style lang="scss" scoped>
</style>
